<template>
	<view class="body">
		<uni-nav-bar class="nav" color="#1ABC9C" left-text="&lt;返回" @clickLeft="re" title="注册用户" />
		<view class="icon">
			<image class="icon_img" src="../../static/login/nav_icon.svg"></image>
		</view>
		<view class="trunk">
			<uni-forms ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item required label="用户昵称:" name="nickname">
					<uni-easyinput :inputBorder="false" v-model="formData.nickname"class="input_val" type="text" placeholder="请输入昵称"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required label="手机号:" name="phone">
					<uni-easyinput :inputBorder="false" v-model="formData.phone" class="input_val" type="number"
						placeholder="请输入手机号" maxlength="11"/>
				</uni-forms-item>
				<uni-forms-item required label="短信验证:" name="code">
					<uni-easyinput :inputBorder="false" v-model="formData.code" class="input_val" type="number" placeholder="输入验证码" maxlength="6" clearSize="0"></uni-easyinput>
					<text class="send_code" v-if="!isCode" @click="sendCode">{{content}}</text>
					<text class="code_time" v-if="isCode">{{content}}</text>
				</uni-forms-item>
				<uni-forms-item required label="密码:" name="password">
					<uni-easyinput :inputBorder="false" v-model="formData.password" class="input_val" type="password" placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required label="确认密码:" name="repassword">
					<uni-easyinput :inputBorder="false" v-model="formData.repassword" class="input_val" type="password" placeholder="请再次确认密码"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="bottom">
			<view class="bottom_top">
				<image class="icon_radio_img" src="../../static/login/xuan1.svg" v-if="radioChecked" @click="radioChecked=!radioChecked"></image>
				<image class="icon_radio_img" src="../../static/login/xuan2.svg" v-if="!radioChecked" @click="radioChecked=!radioChecked"></image>
				<text style="color: #909399;">已阅读并同意</text>
				<text class="book" @click="toUserAgreement">《思云课堂用户服务协议》</text>
			</view>
		</view>
		<button @click="formSubmit" class="sub">注册</button>
		<view class="register_btn" >
			<text @click="toLogin">已有账号去登录</text>
		</view>
	</view>
</template>

<script>
	
	import {
		sendCode
	} from '../../static/http/getData.js';
	
	import {
		createUser
	} from '../../static/http/getData.js';
	
	export default {
		data(){
			return {
				// 表单数据
				formData: {
					nickname:'',
					phone: '',
					code:'',
					password: '',
					repassword:'',
				},
				rules: {
					// 对nickname字段进行必填验证
					nickname: {
						rules: [
							{
								required: true,
								errorMessage: '请输入昵称',
							},
						]
					},
					// 对phone字段进行必填验证
					phone: {
						rules: [
							{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
								errorMessage: '请输入正确手机号',
							}
						]
					},
					// 对code字段进行必填验证
					code: {
						rules: [
							{
								required: true,
								errorMessage: '请输入验证码',
							},
						]
					},
					// 对password字段进行必填验证
					password: {
						rules: [
							{
								required: true,
								errorMessage: '请输入密码',
							},
						]
					},
					// 对erPwd字段进行必填验证
					repassword: {
						rules: [
							{
								required: true,
								errorMessage: '请再次确认密码',
							},
							{
								validateFunction: (rule, value, data, callback) => {
									// 异步需要返回 Promise 对象
									return new Promise((resolve, reject) => {
										setTimeout(() => {
											if (value == this.formData.password ) {
												resolve()
											} else {
												reject(new Error('确认密码要与密码一致'))
											}
										}, 2000)
									})
								}
							}
						]
					},
				},
				radioChecked:false,
				//验证码文字
				content: '发送验证码',
				//验证码
				code: '123456',
				//定时器
				clock: '',
				//验证码倒计时时间
				timeout: 60,
				//倒计时期间隐藏可以点击的获取验证码
				isCode: false,
			}
		},
		methods:{
			formSubmit(e){
				this.$refs.form.validate().then(res=>{
					if(this.radioChecked){
						if(this.code == this.formData.code){
							if(this.code == this.formData.code){
								createUser(res).then(res =>{
									if(res.data.data){
										uni.showTabBar({
											title: '注册成功',
											duration: 2000
										});
										this.toLogin();
									}else{
										uni.showToast({
											title: '手机号被注册',
											icon:'error',
											duration: 2000
										});
									}
									
								});
							}else{
								uni.showToast({
									title: '验证码有误',
									icon:'error',
									duration: 2000
								});
							}
						}else{
							uni.showToast({
								title: '验证码有误',
								icon:'error',
								duration: 2000
							});
						}
					}else{
						uni.showToast({
							title: '请勾选用户服务协议',
							icon:'error',
							duration: 2000
						});
					}
				}
			)},
			//手机验证码登录
			sendCode() {
				this.$refs.form.validateField(['phone']).then(res => {
					sendCode(res).then(res => {
						this.code = res.data.data
						this.getCountdown();
					})
				}).catch(e => {
					uni.showToast({
						title: '手机号错误',
						icon: 'error',
						duration: 2000
					});
				})
			},
			//验证码倒计时
			getCountdown() {
				this.isCode = true;
				this.clock = window.setInterval(() => {
					this.content = this.timeout + 's后可重新发送';
					this.timeout--;
					if (this.timeout < 0) {
						this.timeout = 60;
						this.isCode = false;
						this.content = "重新发送验证码";
						window.clearInterval(this.clock);
					}
				}, 1000)
			},
			//返回登录
			re(){
				uni.navigateTo({
				    url: '/pages/login/login'
				});
			},
			//返回登录
			toLogin(){
				uni.navigateTo({
				    url: '/pages/login/login'
				});
			},
			//跳转到用户协议
			toUserAgreement() {
				uni.navigateTo({
					url: '/pages/login/userAgreement'
				});
			}
		},
	}
</script>

<style>
	.nav{
		margin-top: 25px;
	}
	.icon {
		margin: 10% auto;
		width: 70px;
	}
	
	.icon .icon_img {
		width: 70px;
		height: 70px;
	}
	.trunk{
		width: 80%;
		margin: 0 auto;
	}
	.bottom{
		width: 80%;
		margin: 20px auto;
	}
	.uni-forms-item{
		border-bottom: 1px solid #f3f3f3;
	}
	.bottom .icon_radio_img{
		width: 15px;
		height: 15px;
		vertical-align: sub;
		margin-right: 5px;
	}
	.bottom .bottom_top{
		width: 95%;
		margin: 0 auto;
	}
	.book{
		color: #1ABC9C;
		font-size: 13px;
	}
	.sub{
		width: 80%;
		margin-top: 20px;
		background-color: #1ABC9C;
		color: #F2F6FC;
	}
	.register_btn{
		width: 80%;
		margin: 10px auto;
		color: #1ABC9C;
		text-align: center;
		font-size: 15px;
	}
	.send_code {
		position: absolute;
		top: 5px;
		right: 0;
		color: #1ABC9C;
	}
	
	.code_time {
		position: absolute;
		top: 5px;
		right: 0;
		color: #999999;
	}
</style>
